<template>
	<view class="pb130 wh">
		<view class="p2 bf">
			<view v-if="form.specData && form.specData.length > 0" class="bf2f p2">
				<block v-for="(items, indexs) in form.specData" :key="items">
					<block v-if="items.value && items.value.length > 0">
						<view class="mb10">
							<view class="f-bt">
								<view>
									<view class="m-r-defalt" style="font-weight: bold">{{ items.name }}</view>
								</view>
								<view class="cf06 mr10" @click="delSpec(indexs)">删除</view>
							</view>
							<view class="flex f-w mt10">
								<view v-for="(item, index) in items.value" :key="item" class="attrBox flex"
									@click.stop="changSpec(indexs, index, item)">
									<view class="gou">
										<u-icon slot="right" size="14" color="#FD8906" name="checkmark-circle" v-if="item.checkId == 1"></u-icon>
									</view>
									{{ item.name }}
									<view class="iconfont icon-icon_cuowu gb"
										@click.stop="delchirdrenSpec(indexs, index)">
									</view>
								</view>
							</view>
						</view>
					</block>
				</block>
				<div class="w100">
					<view class="cf06 mr10" @click="openSpec">+ 编辑多规格 </view>
				</div>
			</view>
			<view v-else class="selectBox w100">
				<view class="cf06 mr10" @click="openSpec">+ 添加多规格 </view>
			</view>
			<sku-group :specData="form.specData" :parentGroup="form.skus" @sku-data="skuData"></sku-group>
		</view>
		<view class="buts mt20">
			<view class="p-0-20 mb10">
				<view class="cf bs30 tac p10 f14 wei" :style="{background:subColor,color:'#000'}" @click="saveSpec">
					保存规格
				</view>
			</view>
		</view>
		<addWindow ref="addWindow" @edit-spec="editSpec"></addWindow>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions
	} from 'vuex'
	import addWindow from "./components/addGGSZ.vue"
	import skuGroup from "./components/addGGSZ-SKU.vue"
	import {
		getPage,
	} from '@/common/handutil.js'
	export default {
		name: 'ggsz',
		components: {
			addWindow,
			skuGroup,
		},
		data() {
			return {
				subColor: uni.getStorageSync('subject_color'),
				form: {
					checkData:[],
				},
				skus:[],
			}
		},
		onLoad(options) {
			if (options && options.form) {
				this.form = JSON.parse(uni.getStorageSync('fbsp-ggsz'))
			}
		},
		computed: {},
		methods: {
			changSpec(indexs, index, row) {
				this.form.specData[indexs].value.forEach((data) => {
					if (data.name == row.name) {
						this.form.specData[indexs].value[index].checkId = !row.checkId ?
							1 :
							null;
					} else {
						data.checkId = null;
					}
				});
			},
			delchirdrenSpec(indexs, index) {
				this.form.specData[indexs].checkList.splice(index, 1);
				this.form.specData[indexs].value.splice(index, 1);
			},
			delSpec(indexs) {
				this.form.specData.splice(indexs, 1);
			},
			openSpec() {
				this.$refs['addWindow'].open(this.form.specData)
			},
			editSpec(checkData) {
				this.form.specData = checkData
			},
			skuData(d){
				this.skus = d
				// this.form.skus = d;
				// getPage().$vm.skuData(d)
			},
			saveSpec(){
				this.form.skus = this.skus
				getPage().$vm.editSpec(this.form)
				uni.navigateBack({
					delta: 1
				})
			},
		},
	}
</script>
<style scoped lang="scss">
	.attrBox {
		border: 2rpx solid #FDDA34;
		background: #fbf2c699;
		border-radius: 6rpx;
		padding: 10rpx 20rpx;
		margin-right: 30rpx;
		position: relative;

		.gb {
			position: absolute;
			right: -6px;
			top: -6px;
			font-size: 12px;
			color: #f00;
		}

		.gou {
			position: absolute;
			left: -6px;
			top: -6px;
			font-size: 12px;
			color: #999;

			&.active {
				color: var(--el-color-primary);
			}
		}
	}
	.buts {
		width: 100%;
		position: fixed;
		left: 0;
		bottom: 0;
	}
</style>